<template>
    <div class="Login">
        <!--上半部分-->
        <div class="login-top">
            <!--返回键-->
            <i class="el-icon-arrow-left return" @click="loginBack()"></i>
            <!--气泡-->
            <span class="ball ball1"></span>
            <span class="ball ball2"></span>
            <span class="ball ball3"></span>
            <span class="ball ball4"></span>
        </div>
        <!--下半部分-->
        <div class="login-form">
            <!--账号-->
            <div class="mobile" :class="{on:iconTelLight}">
                <svg class="icon" :class="{on:iconTelLight}" aria-hidden="true">
                    <use xlink:href="#icon-tel"></use>
                </svg>
                <input type="text" 
                       placeholder="请输入手机号" 
                       @focus="iconTelLight=true" 
                       @blur="iconTelLight=false" 
                       v-model="username" />
            </div>
            <!--密码-->
            <div class="pwd" :class="{on:iconPwdLight}">
                <svg class="icon" :class="{on:iconPwdLight}" aria-hidden="true">
                    <use xlink:href="#icon-icon"></use>
                </svg>
                <input type="password" 
                       placeholder="密码" 
                       @focus="iconPwdLight=true" 
                       @blur="iconPwdLight=false"
                       v-model="password" />
            </div>
            <!--登录按钮-->
            <!--
<div class="confirm">
<el-button type="primary" :loading="loginBtnState" :disabled="loginBtnState" @click="loginIn">{{loginBtnText}}</el-button>
</div>
-->
            <div class="confirm">
                <el-button :class="{on:loginBtnState}" type="primary" :disabled="loginBtnState" @click="loginIn"><img v-if="loginBtnState" src="../assets/login/reLoad.svg" alt="" class="regLoading">{{loginBtnText}}</el-button>
            </div>
            <!--忘记密码 and 注册-->
            <div class="links clearfix" v-if="!inApp()">
                <router-link class="left" to="/sendcode">忘记密码？</router-link>
                <router-link class="right" to="/reg">注册</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Login',
        data () {
            return {
                iconTelLight:false,//手机图标高亮
                iconPwdLight:false,//密码图标高亮

                loginBtnState:false,//登录按钮状态
                loginBtnText:'登录',//登录按钮状态

                username:'',//账号
                password:'',//密码
                
                popState:false,//默认非app进入
            }
        },
        created(){
            
        },
        mounted(){
            window.popPage = this.popPage
        },
        methods:{
            //是否app进入并且pop出去
            popPage(param){
                let str = param + ''
                this.popState = str==='1'?true:false
                alert(this.popState)
            },
            //返回
            loginBack(){
                if(this.deviceType() === 1){//安卓
                    if(this.popState){
                        window.hy.exit() 
                    }else{
                        this.goback()   
                    }
                }else if(this.deviceType() === 2){//IOS
                    if(this.popState){
                        window.webkit.messageHandlers.hyxyPop.postMessage(null)
                    }else{
                        this.goback()   
                    }
                }else{//wap
                    this.goback()
                }
            },
            //登录提交
            loginIn(){
                if(!this.username){
                    this.$message.warning('请输入账号~~亲');
                    return;
                }else if(!this.password){
                    this.$message.warning('请输入密码~~亲');
                    return;
                }
                this.loginBtnState=true;
                this.loginBtnText='';
                //ajax
                let data={
                    username:this.username,
                    password:this.password
                };
                this.Posthttp('/?method=flower.login.index',data,(res)=>{
                    this.loginBtnState = false;
                    this.loginBtnText = '登录';
                    /*登录是否成功*/
                    if(JSON.parse(res.bodyText).status ===1){

                        this.$message.success('登录成功');
                        window.localStorage.setItem('userInfo', JSON.stringify(JSON.parse(res.bodyText).data.member));//成功后储存用户

                        if(this.deviceType() === 1){//安卓
                            if(this.popState){
                                window.hy.hyxyLogin(this.username,this.password,'1')
                            }else{
                                window.hy.hyxyLogin(this.username,this.password,'0')
                                this.$router.go(-1)
                            }
                        }else if(this.deviceType() === 2){//IOS
                            if(this.popState){
                                data.isFinish = '1'
                                window.webkit.messageHandlers.hyxyLogin.postMessage(JSON.stringify(data))  
                            }else{
                                data.isFinish = '0'
                                window.webkit.messageHandlers.hyxyLogin.postMessage(JSON.stringify(data))  
                                this.$router.go(-1)
                            }
                        }else{//wap
                            this.$router.go(-1);   
                        }

                    }else{
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Login {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow-y: auto;
        padding-bottom: .3rem;
        background-color: #fff;
        /*top*/
        .login-top{
            width: 100%;
            height: 4rem;
            background: #d95627 url(../assets/login/login.png) no-repeat center/2.11rem 1.44rem;
            position: relative;
            .return{
                position: absolute;
                left:.2rem;
                top: .2rem;
                font-size: .4rem;
                color: #fff;
            }
            .ball{
                background-color: rgba(255, 196, 175,.3);
                border-radius: 100%;
                position: absolute;
            }
            .ball1{
                width: .2rem;
                height: .2rem;
                left: .45rem;
                top: 1.1rem;
                animation: balloon1 6s ease-in-out infinite;
            }
            .ball2{
                width: .4rem;
                height: .4rem;
                left: .8rem;;
                top: 1.18rem;
                animation: balloon2 8s ease-in-out infinite;
            }
            .ball3{
                width: .4rem;
                height: .4rem;
                right: .1rem;
                bottom: 1.1rem;
                animation: balloon2 8s ease-in-out infinite;
            }
            .ball4{
                width: .2rem;
                height: .2rem;
                right: .34rem;
                bottom: .7rem;
                animation: balloon1 8s ease-in-out infinite;
            }
        }
        /*bottom*/
        .login-form{
            width: 80%;
            margin: 1.1rem auto 0;
            color: #999;
            .icon{
                position: absolute;
                left: 0;
                color: #999;
                font-size: .3rem;
                top: calc(50% - .15rem);
                &.on{
                    color: #d95627;
                }
            }
            input{
                width: 100%;
                height: 100%;
                border: 0;
                padding-left: .45rem;
                outline: 0;
                font-size: .28rem;
            }
            .mobile{
                position: relative;
                height: .7rem;
                border-bottom: 1px solid #e4e4e4;
                &::after{
                    display: block;
                    width: 0;
                    height: 1px;
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    transition: all .4s;   
                }
                &.on{
                    border-bottom: 1px solid transparent;  
                }
                &.on::after{
                    width: 100%;
                    background: #d95627;
                }
            }
            .pwd{
                @extend .mobile;
                margin-top: .8rem;
            }
            /*按钮*/
            .confirm{
                outline: none;
                margin-top: .8rem;
                border-radius: .4rem;
                overflow: hidden;
                text-align: center;
                button{
                    position: relative;
                    width: 100%;
                    height: .8rem;
                    border-radius: .4rem;
                    letter-spacing: 1px;
                    outline: none;
                    font-size: .28rem;
                    text-align: center;
                    transition: all .4s;
                    &.on{
                        width: .8rem;
                        height: .8rem;
                        border-radius: 100%;
                        background: #d95627;
                    }
                    .regLoading{
                        position: absolute;
                        width: .6rem;
                        height: .6rem;
                        left: calc(50% - .3rem);
                        top: calc(50% - .3rem);
                    }
                }
            }
            /*其他链接*/
            .links{
                font-size: .26rem;
                margin-top: .4rem;
            }
        }
    }
</style>
